<template>
    <div class="content-wrapper quill-editor">

        <vue-editor
                v-model="content"
                :editorOptions="editorSettings"
        ></vue-editor>

        <!--<vue-editor
                v-model="content"
                useCustomImageHandler
                @imageAdded="handleImageAdded"
        ></vue-editor>-->

        <div class="quill-code">
            <div class="title">Code</div>
            <code class="hljs xml" v-html="contentCode"></code>
        </div>

    </div>
</template>

<script>

    import { VueEditor, Quill } from 'vue2-editor'
    import { ImageDrop } from 'quill-image-drop-module'

    Quill.register('modules/imageDrop', ImageDrop)

    export default {
        name: "Editor",
        components: {
            VueEditor
        },
        data() {
            return {
                content: '<h2>Im Editore</h2>',
                editorSettings: {
                    modules: {
                        imageDrop: true,
                        toolbar: [
                            [{ 'size': ['small', false, 'large'] }],
                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                            ['link', 'image']
                        ],
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        },
                    }
                }
            }
        },
        methods: {
            handleImageAdded(file, Editor, cursorLocation, resetUploader) {
                console.log(file)
                var formData = new FormData();
                formData.append('image', file)

                console.log(formData)
            }
        },
        computed: {
            contentCode() {
                return this.content
            }
        }
    }


</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .quill-code {
        height: auto;
        border: none;
        > .title {
            border: 1px solid #ccc;
            height: 3em;
            line-height: 3em;
            text-indent: 1rem;
            font-weight: bold;
        }
    }
</style>